<template>
  <div>
    <h1>hello vue</h1>
    <ul>
      <li v-for="item in arr">{{ item }}</li>
    </ul>
    <button @click="handlerFn">向数组下标1位置插入新的内容</button>
    <!-- 

      总结：经过观察效果得出如下结论
      
      v-for更新：会先产生新旧DOM，然后进行对比，最后决定是否复用真实DOM/更新内容
          没有发生改变的直接复用原来的真实DOM，如果发生改变的则直接更新内容，这种更新方式称：就地更新原则。

      和原生js更新DOM对比的话，有什么好处？
        就地更新原生明显提高了DOM更新性能

     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["老大", "老二", "老三"],
    };
  },
  methods: {
    handlerFn() {
      this.arr.splice(1, 0, "新来的");
    },
  },
};
</script>

<style>
</style>